<template>
  <cover-view class="loading-page" v-if="isShow">
    <uni-transition
      ref="ani"
      custom-class="transition"
      mode-class="fade"
      :styles="styles"
      :show="isShow"
    >
      <view class="loading-page-box">
        <view class="loading1"></view>
        <text class="text">正在加载</text>
      </view>
    </uni-transition>
  </cover-view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, reactive, toRefs, computed } from "vue";
const emit = defineEmits(["input"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const state = reactive({
  styles: {
    width: "100%",
    height: "100%",
  },
});
const { styles } = toRefs(state);

const isShow = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("input", val);
  },
});

const show = () => {
  isShow.value = true;
};
const hide = () => {
  isShow.value = false;
};
</script>

<style lang="scss" scoped>
.loading-page {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  // background-color: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .loading-page-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    box-sizing: content-box;
    .loading1 {
      width: 36px;
      height: 36px;
      border: 2px solid #ccc;
      // border: 2px solid #ccc;
      border-top-color: transparent;
      border-radius: 100%;
      animation: circle1 infinite 0.75s linear;
    }

    .text {
      font-size: 28rpx;
      margin-top: 14rpx;
      color: #ccc;
    }
  }
}

@keyframes circle1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>